<template>
    <div class="user">
        <lay-tab type="card" v-model="tab.current">
            <lay-tab-item title="用户管理" id="1">
                <div class="user_card d">
                    <div class="user_card_query">
                        <div class="div" style="width: 200px;">
                            <lay-input size="sm" v-model="queryValue" placeholder="输入商品关键词" @append="">
                                <template #suffix>
                                    <lay-icon type="layui-icon-search" @click="QueryChangeGoods()"></lay-icon> &nbsp;
                                </template>
                            </lay-input>
                        </div>
                        <div class="div" style="margin: 0 20px;">
                            <lay-select size="sm" v-model="selectValue" @change="queryChange">
                                <lay-select-option :value="1" label="全部"></lay-select-option>
                                <lay-select-option :value="2" label="游客"></lay-select-option>
                                <lay-select-option :value="3" label="商家"></lay-select-option>
                                <lay-select-option :value="4" label="超级管理员"></lay-select-option>
                            </lay-select>
                        </div>
                    </div>
                    <div class="user_card_table dd">
                        <lay-table :columns="table.columns" :data-source="table.dataSource" even
                            style="min-height: 450px;height: 450px;" :loading="table.Loading"
                            @row-double="EditUser('编辑', $event)">
                            <template v-slot:action="{ row }">
                                <lay-button type="primary" size="xs" @click="actionEditUser('编辑', row)">编辑</lay-button>
                                <lay-button type="danger" size="xs" @click="actionDeleteUser(row)">删除</lay-button>
                            </template>
                            <template v-slot:role="{ row }">
                                <div class="aaa" v-for="item in role">
                                    <lay-tag :type="item.roleType" v-if="row.role == item.id">{{ item.permissionName
                                        }}</lay-tag>
                                </div>
                            </template>
                            <template v-slot:userImage="{ row }">
                                <lay-avatar :src="row.userImage" size="lg" shape="circle"></lay-avatar>
                            </template>
                        </lay-table>
                    </div>
                </div>
            </lay-tab-item>
        </lay-tab>
    </div>

    <lay-layer v-model="rowEditFormVisible" :shade="false">
        <div class="a">
            <lay-form size="sm" :model="rowEditForm">
                <lay-form-item label="用户名">
                    <lay-input v-model="rowEditForm.username"></lay-input>
                </lay-form-item>
                <lay-form-item label="手机号">
                    <lay-input v-model="rowEditForm.phone"></lay-input>
                </lay-form-item>
                <lay-form-item label="角色">
                    <lay-select v-model="rowEditForm.role">
                        <lay-select-option :value="String(item.id)" :label="item.permissionName" v-for="item in role"
                            :key="item.id"></lay-select-option>
                    </lay-select>
                </lay-form-item>
                <lay-form-item label="角色">
                    <UploadFile @DeleteImage="DeleteImage" @ImageFile="getImageFile" :imageUrl="rowEditForm.userImage">
                    </UploadFile>
                </lay-form-item>
                <lay-form-item label="其他信息">
                    <lay-input v-model="rowEditForm.otherUserInfo"></lay-input>
                </lay-form-item>
                <lay-form-item>
                    <div class="div" style="float: right;">
                        <lay-button type="primary" @click="confirmUser">确认</lay-button>
                        <lay-button @click="rowEditFormVisible = false">取消</lay-button>
                    </div>
                </lay-form-item>
            </lay-form>
        </div>
    </lay-layer>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
    getUser,
    deleteUser,
    editUser
} from "../../api/path/user.js"
import {
    uploadFile
} from '../../api/path/uploadFile.js'
import UploadFile from '../../components/uploadFile.vue';
import { layer } from '@layui/layui-vue';
const tab = reactive({
    current: '1',
})
const imageUrl = ref('')
const selectValue = ref(1)
const queryValue = ref('')
const table = reactive({
    columns: [
        {
            title: '用户ID',
            key: 'userID',
            width: '100px',
        },
        {
            title: '用户名',
            key: 'username',
            width: '100px',
        },
        {
            title: '头像',
            key: 'userImage',
            customSlot: 'userImage',
            width: '100px',
        },
        {
            title: '角色',
            key: 'role',
            customSlot: 'role',
            width: '100px',
        },
        {
            title: '余额',
            key: 'balance',
            width: '100px',
            sort: true
        },
        {
            title: '消费总额',
            key: 'totalConsumption',
            width: '100px',
            sort: true
        },
        {
            title: '手机号',
            key: 'phone',
            width: '100px',
        },
        {
            title: '其他信息',
            key: 'otherUserInfo',
            width: '100px',
        },
        {
            title: '操作',
            key: 'action',
            customSlot: "action",
            width: '100px',
            align: 'center',
            fixed: 'right',
        },
    ],
    dataSource: [],
    Loading: false
})
const rowEditFormVisible = ref(false)
const rowEditForm = ref({
    userID: '',
    username: '',
    userImage: '',
    role: '',
    totalConsumption: '',
    phone: '',
    otherUserInfo: '',
})
const role = ref(JSON.parse(localStorage.getItem('roleList')))
onMounted(() => {
    getUserList()
})
const getUserList = () => {
    table.Loading = true
    getUser({ name: queryValue.value }).then(res => {
        console.log(res);
        if (res.code == 1) {
            table.dataSource = res.data
            table.Loading = false
        } else {
            table.Loading = false
            layer.msg(res.msg, { icon: 2 })
        }
    }).catch(err => {
        table.Loading = false
    })
}
const actionDeleteUser = (val) => {
    layer.confirm("确定要删除该用户吗？",
        {
            btn: [
                {
                    text: '确定', callback: (id) => {
                        deleteUser({ id: val.userID }).then(res => {
                            if (res.code == 1) {
                                layer.msg(res.msg, { icon: 1 })
                                getUserList()
                            } else {
                                layer.msg(res.msg, { icon: 2 })
                            }
                        }).catch(err => {
                            layer.msg('删除失败', { icon: 2 })
                        })
                    }
                },
                {
                    text: '取消', callback: (id) => {
                        layer.close(id);
                    }
                }
            ]
        }
    );
}

const queryChange = (val) => {
    switch (val) {
        case 1:
            getUserList()
            break;
        case 2:
            table.Loading = true
            getUser({ name: queryValue.value, sts: val - 1 }).then(res => {
                console.log(res);
                if (res.code == 1) {
                    table.dataSource = res.data
                    table.Loading = false
                } else {
                    table.Loading = false
                    layer.msg(res.msg, { icon: 2 })
                }
            }).catch(err => {
                table.Loading = false
            })
            break;
        case 3:
            table.Loading = true
            getUser({ name: queryValue.value, sts: val - 1 }).then(res => {
                console.log(res);
                if (res.code == 1) {
                    table.dataSource = res.data
                    table.Loading = false
                } else {
                    table.Loading = false
                    layer.msg(res.msg, { icon: 2 })
                }
            }).catch(err => {
                table.Loading = false
            })
            break;
        case 4:
            table.Loading = true
            getUser({ name: queryValue.value, sts: val - 1 }).then(res => {
                console.log(res);
                if (res.code == 1) {
                    table.dataSource = res.data
                    table.Loading = false
                } else {
                    table.Loading = false
                    layer.msg(res.msg, { icon: 2 })
                }
            }).catch(err => {
                table.Loading = false
            })
            break;
        default:
            break;
    }
}

const actionEditUser = (title, val) => {
    rowEditFormVisible.value = true
    rowEditForm.value = { ...val }
    imageUrl.value = val.userImage
    console.log(val);
    console.log(rowEditForm.value);


}

const confirmUser = () => {
    if (rowEditForm.value.userName == '') {
        layer.msg('用户名不能为空', { icon: 2 })
        return
    }
    if (rowEditForm.value.userPhone == '') {
        layer.msg('手机号不能为空', { icon: 2 })
        return
    }
    if (imageUrl.value == '') {
        layer.msg('图片不能为空', { icon: 2 })
        return
    }
    if (rowEditForm.value.userImage.includes('https')) {
        // 没有替换
        editUser(rowEditForm.value).then(res => {
            if (res.code == 1) {
                layer.msg("编辑成功");
                setTimeout(() => {
                    rowEditFormVisible.value = false
                    getUserList()
                }, 1000)
            } else {
                layer.msg("编辑失败");
            }
        })
    } else {
        // 有替换
        uploadFileImage(() => {
            editUser(rowEditForm.value).then(res => {
                if (res.code == 1) {
                    layer.msg("编辑成功");
                    setTimeout(() => {
                        rowEditFormVisible.value = false
                        getUserList()
                    }, 1000)
                } else {
                    layer.msg("编辑失败");
                }
            })
        })
    }
}
// 上传图片
const uploadFileImage = (callback) => {
    uploadFile(imageUrl.value).then(res => {
        if (res.code == 1) {
            rowEditForm.value.userImage = res.data
            callback()
        } else {
            layer.msg("上传失败");
        }
    })
}
// 子组件删除图片的操作
const DeleteImage = () => {
    rowEditForm.value.userImage = ''
}

const getImageFile = (val) => {
    imageUrl.value = val
    // 获取文件流信息
}
</script>
<style scoped lang="less">
.user {
    padding: 10px;
}

.user_card_query {
    display: flex;
    align-items: center;
}
</style>